<!--
 Created by Been on 2017-12-10.
-->
<template>
  <div class="selectType">
    <div class="classify">
      <span @click="selectMe(2,$event)" class="all" :class="{'active':oneType == 2}">{{typeDesc.all}}<i>{{typeNum.all}}</i></span>
      <span @click="selectMe(0,$event)" class="positive" :class="{'active':oneType == 0}">{{typeDesc.positive}}<i>{{typeNum.positive}}</i></span>
      <span @click="selectMe(1,$event)" class="negative" :class="{'active':oneType == 1}">{{typeDesc.negative}}<i>{{typeNum.negative}}</i></span>
    </div>
    <div class="switch">
      <i class="iconfont icon-duihao2" :class="{'favour-duihao-active': switchFlag}"></i> <span>只看有内容的评价</span>
    </div>
  </div>
</template>

<script>
  const ALL = 2;
  export default{
    props: {
      showOneType: {
        type: Number,
        default: ALL
      },
      typeNum: {
        type: Object,
        default(){
          return {
            "all": 21,
            "positive": 32,
            "negative": 32
          }
        }
      },
      typeDesc: {
        type: Object,
        default(){
          return {
            "all": "全部",
            "positive": "满意",
            "negative": "不满意"
          }
        }
      },
      switchFlag:{
      	type:Boolean,
        default:false
      }
    },
    data(){
      return {
        oneType:this.showOneType
      }
    },
    methods:{
      selectMe(type,event){
      	this.oneType = type;
      	this.$emit("showOneEvent",type);
      }
    }
  }
</script>

<style lang="scss">
  .selectType {
    width: 100%;
    .classify {
      padding: 18px 0;
      margin: 0 18px;
      font-size: 0;
      border-bottom: 1px solid rgba(7, 17, 27, .1);
      span {
        display: inline-block;
        padding: 8px 12px;
        line-height: 16px;
        font-size: 12px;
        margin-right: 8px;
        border-radius: 2px;
        i {
          padding-left: 4px;
          font-size: 8px;
          font-style: normal;
        }
        &.all, &.positive {
          background: rgba(0, 160, 220, .2);
          &.active {
            background: rgb(0, 160, 220);
            color: #fff;
          }
        }
        &.negative {
          background: rgba(77, 85, 93, .2);
          &.active {
            background: rgb(77, 85, 93);
            color: #fff;
          }
        }
      }
    }
    .switch {
      padding: 12px 18px;
      color: rgb(147, 153, 159);
      border-bottom: 1px solid rgba(7, 17, 27, .1);
      i {
        font-size: 24px;
        maring-right: 4px;
        vertical-align: middle;
      }
      span {
        font-size: 12px;
        vertical-align: middle;
      }
    }
  }
</style>
